<template>
    <!-- 立即预定页面 -->
    <div class="reservation">
        <van-nav-bar title="宠物寄养" left-text="返回" left-arrow @click-left="back" />
        <!-- 联系人卡片 -->
        <!-- 显示联系人信息 -->
        <van-contact-card type="edit" :name="currentContact.name" :tel="currentContact.tel" @click="onEdit"
            v-if="currentContact" />
        <!-- 显示添加联系人 -->
        <van-contact-card type="add" @click="onAdd" v-else />
        <!-- 服务宠物 -->
        <div class="add-pets">
            <div class="add-service">服务宠物</div>
            <div class="add-photo">
                <div class="photo-one" v-for="item in petList" :key="item.p_id" @click="select(item.p_id)">
                    <!-- 徽标 -->
                    <van-badge>
                        <van-image round width="4rem" height="4rem" :src="item.p_img"></van-image>
                        <template #content v-if="item.p_id == currentId">
                            <van-icon name="success" class="badge-icon"></van-icon>
                        </template>
                    </van-badge>
                    <div class="photo-name">{{ item.p_name }}</div>
                </div>
                <!-- 添加按钮 -->
                <div class="photo-one" @click="goPet">
                    <van-icon name="add-o" size="4rem"></van-icon>
                    <div class="photo-name">添加</div>
                </div>
            </div>
        </div>
        <!-- 选择寄养时间 -->
        <!-- <van-divider /> -->
        <van-cell style="font-weight:bold;font-size:1.5rem;margin-left: -0.5rem;" title="选择寄养时间" :value="date"
            @click="show = true" />
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
        <!-- 服务备注 -->
        <van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="50" placeholder="请输入留言"
            show-word-limit />
        <!-- Booking instructions -->
        <p class="book_detail">预定须知</p>
        <p class="book_details">更多服务细节,下单后会和您联系确认</p>
        <p class="book_detail">取消政策</p>
        <p class="book_details">服务时间首天前可免费取消,服务时间首天后取消,扣除首天费用</p>
        <div class="service_order">
            <van-checkbox v-model="checked" icon-size="15px">已阅读并同意<span style="color: #96cfe8">⟪服务协议⟫</span>
            </van-checkbox>
        </div>
        <!-- 提交订单 -->
        <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />

        <van-overlay :show="isShow">
            <div class="wrapper" @click="stop">
                <div class="block">
                    <img src="../assets/img/weixinzhifu.png" alt="">
                    <span>微信支付</span>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
export default {
    props: ["b_id", "b_name", "b_price"],
    components: {

    },
    data() {
        return {
            isShow: false,
            currentId: "",
            // currentContact: {
            //     name: '张三',
            //     tel: '13000000000',
            // },
            currentContact: null,
            petList: [],
            date: '',
            show: false,
            beizhu: '', //服务备注
            checked: true, //默认选中<<服务协议>>
            price: 0,
            message: ""
        }
    },
    methods: {
        stop() {
            this.isShow = false
        },
        onSubmit() {
            if (this.currentId == "") {
                this.$toast.fail("请选择宠物")
                return
            }
            if (this.date == "") {
                this.$toast.fail("请选择寄养时间")
                return
            }
            const data = {
                pet_id: this.currentId,
                bus_id: this.b_id,
                po_price: this.price / 100,
                po_beizhu: this.message,
                po_number: "",
                po_status: "1",
                po_time: this.date,
                c_id: this.currentContact.id,
            }
            this.isShow = true
            console.log(data);
            setTimeout(() => {
                this.isShow = false
                this.$axios.post(this.$api.orderAdd, data)
                    .then(res => res.data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$toast.success(res.msg)
                            this.$router.replace("/order")
                        } else {
                            this.$toast.fail(res.msg)
                        }
                    }).catch(err => {
                        this.$toast.fail(err)
                    })


            }, 2000)

        },

        formatDate(date) {
            console.log(`${date.getMonth() + 1}-${date.getDate()}`);
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        },
        onConfirm(date) {
            let [start, end] = date;
            this.show = false;
            this.date = `${this.formatDate(start)} ~ ${this.formatDate(end)}`;
            start = new Date(start)
            end = new Date(end)
            let day = (end - start) / 1000 / 60 / 60 / 24
            // this.date += " " + day + "天"
            this.price = day * this.b_price * 100
            console.log(this.price);
            console.log(this.date);
        },
        select(id) {
            this.currentId = id
            console.log(this.currentId);
        },

        back() {
            this.$router.back()
        },
        onAdd() {
            this.$router.push("/contactAdd")
        },
        onEdit() {
            this.$router.push(`/contactEdit`)
        },
        goPet() {
            this.$router.push("/pet");
        },
        getContact() {
            this.$axios.get(this.$api.contactGet)
                .then(res => res.data)
                .then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.currentContact = res?.data[0]
                    }
                })
        },
        getPet() {
            this.$axios.get(this.$api.petGetAll)
                .then(res => res.data)
                .then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.petList = res.data.data
                        console.log(this.petList);
                    }
                })
        }
    },
    async mounted() {
        await this.getContact()
        await this.getPet()
    }
}
</script>

<style lang="scss" scoped>
.van-contact-card::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: -webkit-repeating-linear-gradient(135deg,
            #ff6c6c 0,
            #ff6c6c 20%,
            transparent 0,
            transparent 25%,
            #f8e176 0,
            #f8e176 45%,
            transparent 0,
            transparent 50%);
    background: repeating-linear-gradient(-45deg,
            #ff6c6c 0,
            #ff6c6c 20%,
            transparent 0,
            transparent 25%,
            #f8e176 0,
            #f8e176 45%,
            transparent 0,
            transparent 50%);
    background-size: 80px;
    content: "";
}

.add-service {
    margin: 1rem auto;
    margin-left: 1rem;
    margin-top: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    width: 90%;
}

.add-photo {
    display: flex;
    overflow-y: hidden;
    overflow: hidden;
    padding-top: 1rem;
    width: 90%;
    margin: 0 auto;
    align-items: center;

    .photo-one {
        width: 4rem;
        margin: 0 1.4rem;
    }

    .photo-name {
        text-align: center;
        margin: 1rem auto;
    }
}

.book_details {
    font-size: 1.5rem;
    margin: 1rem auto;
    width: 92%;
    line-height: 2rem;
    color: #524f5e;
}

.book_detail {
    font-size: 1.5rem;
    margin: 1rem auto;
    width: 92%;
    line-height: 2rem;
    color: #524f5e;
    font-weight: bold;
}

.service_order {
    font-size: 1.5rem;
    margin: 1rem auto;
    width: 90%;
    height: 10rem;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
        width: 12rem;
        height: 12rem;
        // background-color: red;

        img {
            width: 90%;
            height: 90%;
        }

        span {
            display: inline-block;
            color: #fff;
            font-size: 2rem;
            margin-left: 1.4rem;
        }
    }

    // img {

    // }
}
</style>
